<!DOCTYPE>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>ol3-layers-witcher</title>
  <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
</head>
<body style="margin:0 0 0 0; padding:0 0 0 0;">
	<div id="map" style="width: 100%; height: 100%;"></div>

<script type="text/javascript" src="scripts/libs/ol.js"></script>
<script type="text/javascript" src="scripts/libs/ol3-layerswitcher.js"></script>
<script type="text/javascript">
	var tian_di_tu_road_layer = new ol.layer.Tile({
		title: "天地图路网",
		source: new ol.source.XYZ({
			url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
		})
	});

	var tian_di_tu_annotation = new ol.layer.Tile({
		title: "天地图文字标注",
		source: new ol.source.XYZ({
			url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}'
		})
	});

	var map = new ol.Map({
		target: 'map',
		layers: [
			tian_di_tu_road_layer,
			tian_di_tu_annotation
		],
		controls: ol.control.defaults({}).extend([
			new ol.control.MousePosition({})
		]),
		view: new ol.View({
			center:  [11468382.41282299,3502038.887913635],
			zoom: 11
		})
	});

	// 定义需要用到的控件
	var layerSwitcher = new ol.control.LayerSwitcher({
		tipLabel: '切换图层'
	});
	map.addControl(layerSwitcher);
</script>
</body>
</html>
